<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script th:src="@{/static/main.js}"></script>

    <style>
        .container {
            padding-top: 10px;
        }
    </style>
</head>
<body>

<div class="container-fluid" id="app" style="margin-top: 5px;margin-bottom: 100px">

    <div class="container col-md-12" v-if="cartVoList.length<=0" >
        <h1 style="text-align: center">购物车还没有任何商品,快去<a @click.prevent="goTo('userapp.html') " style="cursor: pointer">加购</a>吧~</h1>
    </div>

    <div v-if="cartVoList.length>0" style="margin-top: 10px;text-align: center"><h1>我的购物车</h1></div>
    <div class="container" v-for="cartVo in cartVoList">
        <div class="row">
            <img v-if="!cartVo.storeImg" src="/static/109951166155909486.jpg" style="width: 60px;height: 60px; border-radius: 50%"/>
            <img v-if="cartVo.storeImg" :src="cartVo.storeImg" style="width: 60px;height: 60px; border-radius: 50%"/>
            {{cartVo.storeName}}
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <tr>
                        <th>
                            <input type="checkbox" :id="cartVo.storeId" class="cartCheck" @click="checkAll"/>
                        </th>
                        <th>编号</th>
                        <th>商品名</th>
                        <th>商品图片</th>
                        <th>图书单价(元)</th>
                        <th>购买数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>


                    <tr v-for="cartItem in cartVo.cartItemList">
                        <td>
                            <input type="checkbox" :name="cartVo.storeId"  @change="checkItems"
                                   :value="cartItem.productId" class="cartItemCheck"/>
                        </td>
                        <td style="height:60px;line-height: 60px" v-text="cartItem.productId">编号</td>
                        <td style="height:60px;line-height: 60px" v-text="cartItem.productName">名称</td>
                        <td>
                            <img :src="cartItem.productImg" style="width: 60px;height: 60px; border-radius: 50%"/>
                        </td>
                        <td style="height:60px;line-height: 60px" v-text="cartItem.productPrice">单价</td>
                        <td style="height:60px;line-height: 60px">
                            <a class="btn btn-default btn-sm"
                               @click.prevent="updateBuyCount(cartItem.productId,-1)">一</a>
                            &nbsp;<span v-text="cartItem.buyCount"></span>&nbsp;
                            <a class="btn btn-default btn-sm"
                               @click.prevent="updateBuyCount(cartItem.productId,+1)">十</a>
                        </td>
                        <td style="height:60px;line-height: 60px" v-text="cartItem.sumPrice">图书小计</td>
                        <td style="height:60px;line-height: 60px">
                            <a class="btn btn-danger" @click.prevent="updateBuyCount(cartItem.productId,0)">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <span> 总价(元): {{cartVo.totalPrice}} </span>
            </div>
        </div>
    </div>


</div>


</body>
</html>

<script>

    console.log(".........myCart...........")

    let myCart = new Vue({
        el: "#app"
        ,
        data: {
            cartVoList: [],
            totalPrice: '0.00',
            cartVo: '',
            productIds: [],

        }
        ,
        methods: {
            initCartItemList() {
                let _this = this;
                $.post("/cart/getAllCartVos", function (data) {
                    _this.cartVoList = data;
                });
            }
            ,
            checkAll() {
                let allCheck = $(".cartCheck");
                allCheck.each(function (){
                    let key =  $(this).prop("id");
                    let allCheckFlag =  $(this).prop("checked");
                    let allItemCheck = $("input[name="+key+"]");
                    allItemCheck.each(function (){
                        $(this).prop("checked", allCheckFlag);
                    })
                })
                this.calTotalPrice();
            },
            checkItems() {
                let allCheck = $(".cartCheck");
                allCheck.each(function (){
                    let key =  $(this).prop("id");
                    let allItemCheck = $("input[name="+key+"]");
                    let allCheckFlag = true;
                    allItemCheck.each(function (){
                        if (!$(this).prop("checked")){
                            allCheckFlag = false;
                        }
                    })
                    $(this).prop("checked",allCheckFlag);
                })
                this.calTotalPrice();
            }
            ,
            updateBuyCount(productId, buyCount) {
                let _this = this;
                $.post("/cart/updateBuyCount",
                    {
                        productId: productId,
                        buyCount: buyCount
                    }
                    ,
                    function () {
                        if (_this.productIds.length < 1) {
                            _this.initCartItemList();
                        } else {
                            _this.calTotalPrice();
                        }
                    }
                )
            }
            ,
            calTotalPrice() {
                this.refreshProductIds();
                let _this = this;
                if (this.productIds.length < 1){
                    this.totalPrice = '0.00';
                    this.initCartItemList();
                    parent.app._data.totalPrice=this.totalPrice;
                }else{
                    $.post("/cart/calPrice", {
                        productIds: this.productIds,
                        excludeOthers: false
                    }, function (data) {
                        _this.cartVoList = data.cartVoList;
                        _this.totalPrice = data.totalPrice;
                        parent.app._data.totalPrice=data.totalPrice;
                    })
                }

            }
            ,
            toOrderPreview() {

            }
            ,
            refreshProductIds() {
                let allItemCheck = $("input[class='cartItemCheck']");
                let arr = []
                allItemCheck.each(function () {
                    if ($(this).prop("checked")) {
                        arr.push($(this).val())
                    }
                });
                this.productIds = arr;
                parent.app._data.productIds=this.productIds;
            }
            ,
            goTo(work){
                parent.app.changeActive(work);
            }


        }
        ,
        created() {
            this.initCartItemList();
        }

    });


</script>